<template>
  <div class="staffskills">
    <div class="top">
      <div class="tip">员工技能</div>
      <div style="margin-left:30px;margin-right:15px;">员工主要技能类别</div>
      <el-select v-model="skillType" placeholder="请选择">
        <el-option
          v-for="item in AllSkillTypeOptions"
          :key="item"
          :label="item + '类技能'"
          :value="item"
        >
        </el-option>
      </el-select>
    </div>
    <div class="bottom">
      <div v-for="(item, index) in checkboxGroupWithName" :key="index">
        <div class="skill">
          <span>{{ item.skillName }}</span>
          <i
            class="el-icon-circle-close delete"
            style="font-size:22px;"
            @click="dialogDateleMethod(item.skillCode)"
          ></i>
        </div>
      </div>
      <el-button
        icon="el-icon-plus"
        @click="dialogAddMethod"
        class="addskills"
      ></el-button>
    </div>
    <el-dialog title="删除技能" :visible.sync="dialogdetele">
      <div>确定要删除这个技能吗？</div>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogdetele = false">取 消</el-button>
        <el-button
          style="background-color:#fd804c;color: #fff;"
          @click="deleteSkill"
          >确 定</el-button
        >
      </div>
    </el-dialog>
    <el-dialog title="添加技能" :visible.sync="dialogAdd">
      <div class="addskills">
        <div v-for="(item, index) in AllSkillOptions" :key="index">
          <div style="margin-bottom:10px;">{{ item.skillType + "类技能" }}</div>
          <el-checkbox-group v-model="checkboxGroup[index]" :key="index">
            <el-checkbox-button
              v-for="(item1, index) in item.skillList"
              :label="item1.skillCode"
              :key="index"
              >{{ item1.skillName }}</el-checkbox-button
            >
          </el-checkbox-group>
        </div>
      </div>
      <div slot="footer" class="dialog-footer">
        <el-button @click="cancelAdd">取 消</el-button>
        <el-button
          style="background-color:#fd804c;color: #fff;"
          @click="determineAdd"
          >确 定</el-button
        >
      </div>
    </el-dialog>
  </div>
</template>

<script>
export default {
  props: {
    staffSkillList1: {
      required: false
    }
  },
  data() {
    return {
      dialogdetele: false,
      dialogAdd: false,
      skillType: "", // 员工主技能类型
      AllSkillTypeOptions: [], // 主技能枚举
      AllSkillOptions: [], // 所有技能
      checkboxGroup: [], // 选中的技能
      checkboxGroupWithName: [], // 选中的技能携带name(扁平化后)
      nowDeleteSkillCode: "",
      saveCheckboxGroup: []
    };
  },
  methods: {
    async fetchAllSkillType() {
      // 获取技能类型枚举
      await this.$http({
        url: "/staffadmin/homeService/staffManager/fetchAllSkillType",
        method: "get"
      }).then(data => {
        this.AllSkillTypeOptions = data;
        this.AllSkillTypeOptions.forEach(item => {
          this.checkboxGroup.push([]);
        });
      });
    },
    async fetchAllSkill() {
      // 获取所有技能（包含所有技能类型）
      await this.$http({
        url: "/staffadmin/homeService/staffManager/fetchAllSkill",
        method: "get"
      }).then(data => {
        this.AllSkillOptions = data;
      });
    },
    // 添加dialog显示
    dialogAddMethod() {
      this.saveCheckboxGroup = JSON.parse(JSON.stringify(this.checkboxGroup));
      this.dialogAdd = true;
    },
    // 确定添加
    determineAdd() {
      let flag = false;
      this.checkboxGroup.forEach(item => {
        if (item.length >= 0) {
          flag = true;
        }
      });
      if (!flag) return;
      const totalOptionArr = []; // 扁平化技能code和name的数组
      this.AllSkillOptions.forEach(item => {
        item.skillList.forEach(item1 => {
          totalOptionArr.push(item1);
        });
      });
      this.checkboxGroupWithName = [];
      this.checkboxGroup.map(item => {
        item.map(item1 => {
          const obj = totalOptionArr.find(item2 => item2.skillCode === item1);
          this.checkboxGroupWithName.push(obj);
        });
      });
      this.dialogAdd = false;
    },
    // 取消添加  保留之前的选择  重置checkboxGroup
    cancelAdd() {
      this.checkboxGroup = this.saveCheckboxGroup;
      this.dialogAdd = false;
    },
    // 删除显示dialog（单个）
    dialogDateleMethod(skillCode) {
      this.dialogdetele = true;
      this.nowDeleteSkillCode = skillCode;
    },
    //确定删除技能（单个）
    deleteSkill() {
      const index = this.checkboxGroupWithName.findIndex(
        item => item.skillCode === this.nowDeleteSkillCode
      );
      this.checkboxGroupWithName.splice(index, 1); // 选中带name的数组删除
      this.checkboxGroup.forEach(item => {
        // 删除不带name的数组
        const index = item.indexOf(this.nowDeleteSkillCode);
        if (index > -1) {
          item.splice(index, 1);
          return false;
        }
      });
      this.dialogdetele = false;
    },
    sendMsg() {
      // 向父组件发送数据
      let skillCodeList = [];
      this.checkboxGroupWithName.forEach(item => {
        skillCodeList.push(item.skillCode);
      });
      this.$emit("save", [
        {
          skillType: this.skillType,
          skillCodeList
        }
      ]);
    },
    async initData() {
      // 编辑回显数据
      const AllSkillOptionsTwo = await this.$http({
        // 二维数组
        url: "/staffadmin/homeService/staffManager/fetchAllSkill",
        method: "get"
      });
      const AllSkillOptionsOne = []; // 二维转一维数组
      AllSkillOptionsTwo.forEach(item => {
        item.skillList.forEach(item1 => {
          AllSkillOptionsOne.push(item1);
        });
      });
      console.log(AllSkillOptionsOne);
      if (this.$route.query.staffCode) {
        this.skillType = this.staffSkillList1[0].skillType;
        const checkboxGroupWithName = [];
        this.staffSkillList1[0].skillCodeList.forEach(item => {
          const obj = AllSkillOptionsOne.find(
            item1 => item1.skillCode === item
          );
          if (obj) {
            checkboxGroupWithName.push(obj);
          }
        });
        this.checkboxGroupWithName = checkboxGroupWithName;
        const checkboxGroup = [];
        AllSkillOptionsOne.forEach(item => {
          // 构建二维数组
          checkboxGroup.push([]);
        });
        // const index = this.findIndex("8cf639b7-e", AllSkillOptionsTwo)
        this.staffSkillList1[0].skillCodeList.forEach(item => {
          const index = this.findIndex(item, AllSkillOptionsTwo);
          checkboxGroup[index].push(item);
        });
        this.checkboxGroup = checkboxGroup;
      }
    },
    findIndex(code, listOptions) {
      // 查找技能code所在的list的index
      let findIndex = "";
      listOptions.forEach((item, index) => {
        const obj = item.skillList.find(item1 => item1.skillCode === code);
        if (obj) {
          findIndex = index;
        }
      });
      return findIndex;
    }
  },
  mounted() {
    this.fetchAllSkillType();
    this.fetchAllSkill();
  },
  watch: {
    skillType() {
      this.sendMsg();
    },
    checkboxGroupWithName: {
      handler() {
        this.sendMsg();
      },
      deep: true
    },
    staffSkillList1(newvalue) {
      if (newvalue) {
        this.initData();
      }
    }
  }
};
</script>

<style lang="scss" scoped>
.staffskills {
  background-color: #fff;
  border-top: 10px solid #ebeef1;
  /deep/ .top {
    display: flex;
    align-items: center;
    font-size: 14px;
    .tip {
      font-size: 18px;
      font-weight: 900;
      padding-left: 20px;
      height: 60px;
      line-height: 60px;
    }
    .el-select {
      width: 120px;
      .el-input__inner {
        height: 30px;
      }
      .el-input__icon {
        line-height: 30px;
      }
    }
  }
  .bottom {
    margin: 0 20px;
    display: flex;
    flex-wrap: wrap;
    padding-bottom: 20px;
    .skill {
      font-size: 14px;
      height: 30px;
      line-height: 30px;
      text-align: center;
      border: 1px solid #ebeef1;
      border-radius: 5px;
      padding: 0px 10px;
      position: relative;
      margin-right: 20px;
      margin-bottom: 20px;
      span {
        position: relative;
      }
      .delete {
        position: absolute;
        right: 0;
        top: 0;
        transform: translate(50%, -50%);
        z-index: 10;
        cursor: pointer;
      }
    }
    .el-button {
      width: 78px;
      height: 32px;
      line-height: 32px;
      padding-top: 0px;
      padding-bottom: 0px;
    }
  }
  /deep/ .el-checkbox-button {
    margin-left: 20px;
    margin-bottom: 10px;
    .el-checkbox-button__inner {
      border: 1px solid #409eff;
      border-radius: 5px;
    }
  }
}
</style>
